/*
 * @Author: jipeng.Li
 * @Date: 2020-01-16  08:52:52
 * @LastEditors: kanglang
 * @LastEditTime: 2021-02-19 14:49:32
 * @Description: 司机详情
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, findNodeHandle,UIManager } from 'react-native';
// import { XMHeader } from '@/common';
import {
  mainBgColorWhite, fontColorCoffee, fontColorBlack,
  px2dp,
  screenWidth,
  isAndroid,
} from '../../../../../common/styles/index';
// import { search, iconBack, disparentsTask } from '@/images';

export default class Adress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dottes:[]
    }
  }

  componentDidMount() {
    setTimeout(()=>{
      this.getHeight()
  },100)
  }

  getHeight() {
      this.layout(this.refs.foo).then(x=>{
        // alert(1)
          let height = parseInt(x.height/1.8)
          const dottes = [];
          for (let i = 0; i < height; i++) {
              dottes.push(i);
          }
          this.setState({dottes},()=>{

              console.log("=========dottes")
              console.log(dottes)
          })
      })
  }

  layout(ref) {
      const handle = findNodeHandle(ref);
      return new Promise((resolve) => {
          UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
              resolve({ x, y, width, height, pageX, pageY });
          });
      });
  }

  render() {
    const {dottes} = this.state
    const arr = [1,2,3,4,5]
    // const {dottes,arr} = this.state
    return (
      <View>
        <View style={styles.sourceWrap}>
          <View>
              <Image
                  style={styles.zhuangIcon}
                  source={require('../../../../../image/icons/zhuang_icon.png')}
                  resizeMode="stretch"
              />
              <View style={styles.line}>
                  {
                      dottes.map(() => {
                      return  <Text style={styles.dash}></Text>;
                      })
                  }       
              </View>
              <View style={styles.line}>
                  {
                      arr.map(() => {
                      return <Text style={styles.dash}></Text>;
                      })
                  }       
              </View>
          </View>
          <View>
              <Text style={ styles.adressName}>玉溪市红塔区二7幢</Text>
              <View ref="foo" style={styles.guigeWrap}>
                  <Text style={ styles.goo}>武颖爽   17002645217</Text>
                  <Text style={[styles.goo,styles.zTime]}>10:00-16:00 可装货</Text>
              </View>
              <Text style={styles.distance}>2000公里</Text>
          </View>
      </View>

      <View style={styles.sourceWrap}>
          <View>
              <Image
                  style={styles.zhuangIcon}
                  source={require('../../../../../image/icons/xie_icon.png')}
                  resizeMode="stretch"
              />
          </View>
          <View>
              <Text style={ styles.adressName}>玉溪市红塔区二7幢玉溪市红塔区二7幢玉溪市红塔区二7幢</Text>
              <View ref="foo" style={styles.guigeWrap}>
                  <Text style={ styles.goo}>武颖爽   17002645217</Text>
                  <Text style={[styles.goo,styles.zTime]}>10:00-16:00 可装货</Text>
              </View>
          </View>
      </View>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  sourceWrap:{
    flexDirection:'row',
    alignItems:'flex-start'
},
zhuangIcon:{
    width: px2dp(36), 
    height: px2dp(36), 
    marginTop: px2dp(7), 
    marginRight: px2dp(20)
},
line:{
    backgroundColor: 'transparent',
    width:px2dp(4),
    marginLeft:px2dp(16)
},
dash:{
    fontSize: 30,
    backgroundColor:'red',
    width:px2dp(2),
    height:px2dp(4),
    marginTop:px2dp(2),
    marginBottom:px2dp(2)
},
adressName:{
    fontSize: px2dp(30), 
    fontWeight: 'bold',
    marginRight:px2dp(60),
    marginTop:px2dp(3)
},
guigeWrap:{
    backgroundColor: 'transparent',
    marginTop:px2dp(10)
},
goo:{
    fontSize: px2dp(26), 
    lineHeight: px2dp(38),
    color: '#999896'
},
zTime:{
    marginTop:px2dp(10)
},
distance:{
    position:'absolute',
    left:px2dp(-60),
    bottom:px2dp(-60),
    backgroundColor: mainBgColorWhite,
    width:'100%'
},
})
